<?php
/**
 * This is the error page HTML.
 *
 * @since 4.1.9
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// phpcs:disable Generic.Files.LineLength.MaxExceeded
$logoImage = '';
$medium    = false !== strpos( AIOSEO_PHP_VERSION_DIR, 'pro' ) ? 'proplugin' : 'liteplugin';
?>
<style type="text/css">
	#aioseo-settings-area {
		visibility: hidden;
		margin: auto;
		width: 750px;
		max-width: 100%;
		animation: loadAioseoSettingsNoJSView 0s 2s forwards;
	}

	#aioseo-settings-error-loading-area {
		text-align: center;
		background-color: #fff;
		border: 1px solid #D6E2EC;
		padding: 15px 50px 30px;
		color: #141B38;
		margin: 82px 0;
	}

	#aioseo-settings-logo {
		max-width: 100%;
		width: 240px;
		padding: 30px 0 15px;
	}

	.aioseo-settings-button,
	.aioseo-settings-button:focus {
		margin-left: auto;
		background-color: #005ae0;
		border-color: #3380BC;
		border-bottom-width: 2px;
		color: #fff;
		border-radius: 3px;
		font-weight: 600;
		transition: all 0.1s ease-in-out;
		transition-duration: 0.2s;
		padding: 14px 35px;
		font-size: 16px;
		margin-top: 10px;
		margin-bottom: 20px;
		text-decoration: none;
		display: inline-block;
	}

	.aioseo-settings-button:hover {
		color: #fff;
		background-color: #1a82ea;
	}

	#aioseo-alert-message {
		position: relative;
		border-radius: 3px;
		padding: 12px 20px;
		font-size: 14px;
		color: #141B38;
		line-height: 1.4;
		border: 1px solid #DF2A4A;
		background-color: #FBE9EC;
	}

	#aioseo-settings-area h3 {
		font-size: 20px;
		color: #434343;
		font-weight: 500;
		line-height:1.4;
	}

	#aioseo-settings-area p {
		line-height: 1.5;
		margin: 1em 0;
		font-size: 16px;
		color: #434343;
		padding: 5px 20px 20px;
	}

	@keyframes loadAioseoSettingsNoJSView{
		to { visibility: visible; }
	}
</style>
<!--[if IE]>
	<style>
		#aioseo-settings-area{
			visibility: visible !important;
		}
	</style>
<![endif]-->

<script type="text/javascript">
	var ua   = window.navigator.userAgent;
	var msie = ua.indexOf( 'MSIE ' );
	if (0 < msie) {
		document.addEventListener('DOMContentLoaded', () => {
			var browserError = document.getElementById( 'aioseo-error-browser' ),
				jsError      = document.getElementById( 'aioseo-error-js' );

			jsError.style.display      = 'none';
			browserError.style.display = 'block';
		})
	} else {
		window.onerror = function myErrorHandler( errorMsg, url, lineNumber ) {
			/* Don't try to put error in container that no longer exists post-vue loading */
			var messageContainer = document.getElementById( 'aioseo-nojs-error-message' );
			if ( ! messageContainer ) {
				return false;
			}
			var message                    = document.getElementById( 'aioseo-alert-message' );
			message.innerHTML              = errorMsg;
			messageContainer.style.display = 'block';
			return false;
		}
	}
</script>

<div id="aioseo-settings-area">
	<div id="aioseo-settings-error-loading-area">
		<img id="aioseo-settings-logo" src="<?php echo esc_attr( $logoImage ); ?>" alt="<?php echo esc_attr( AIOSEO_PLUGIN_NAME ); ?>">

		<div id="aioseo-error-js">
			<h3><?php esc_html_e( 'Ooops! It Appears JavaScript Didn’t Load', 'all-in-one-seo-pack' ); ?></h3>

			<p>
				<?php
				printf(
					// Translators: 1 - Line break HTML tag, 2 - "AIOSEO".
					esc_html__( 'There seems to be an issue running JavaScript on your website. %1$s%2$s is built with JavaScript to give you the best experience possible.', 'all-in-one-seo-pack' ),
					'<br>',
					esc_attr( AIOSEO_PLUGIN_SHORT_NAME )
				);
				?>
			</p>

			<div style="display: none;" id="aioseo-nojs-error-message">
				<div id="aioseo-alert-message"></div>

				<p style="margin-top: 5px; font-size: 14px; color: #141B38;">
					<?php
					// Translators: 1 - "AIOSEO".
					printf(
						esc_html__( 'Copy the error message above and paste it in a message to the %1$s support team.', 'all-in-one-seo-pack' ),
						esc_attr( AIOSEO_PLUGIN_SHORT_NAME )
					);
					?>
				</p>
			</div>

			<a href="https://aioseo.com/docs/how-to-fix-javascript-errors/?utm_source=WordPress&utm_medium=<?php echo esc_attr( $medium ); ?>&utm_campaign=javascript-errors" class="aioseo-settings-button" target="_blank">
				<?php esc_html_e( 'Resolve This Issue', 'all-in-one-seo-pack' ); ?>
			</a>
		</div>

		<div id="aioseo-error-browser" style="display: none">
			<h3><?php esc_html_e( 'Your browser version is not supported', 'all-in-one-seo-pack' ); ?></h3>

			<p>
				<?php
				printf(
					// Translators: 1 - "AIOSEO".
					esc_html__( 'You are using a browser which is no longer supported by %1$s. Please update or use another browser in order to access the plugin settings.', 'all-in-one-seo-pack' ),
					esc_attr( AIOSEO_PLUGIN_SHORT_NAME )
				);
				?>
			</p>

			<a href="https://www.aioseo.com/docs/browser-support-policy/?utm_source=WordPress&utm_medium=<?php echo esc_attr( $medium ); ?>&utm_campaign=javascript-errors" class="aioseo-settings-button" target="_blank">
				<?php esc_html_e( 'View supported browsers', 'all-in-one-seo-pack' ); ?>
			</a>
		</div>
	</div>
</div>